import { t } from 'i18next'
import React, { useMemo } from 'react'
import LabelCheckBox from '../components/LabelCheckBox'
import { IMtOperation } from '@/api/personalConfig/interface'
import { IAction } from '../interface'
import { useGlobalStore } from '@/store/global'
interface TerminalOperationsProps {
	configInfo: IMtOperation
	defaultInfo: IMtOperation
	propsChange: ({ type, payLoad }: IAction) => void
}
/*
组件的使用

<TerminalOperations
	configInfo={personalConfigInfo.mt_operate}
	defaultInfo={defaultPersonalConfig.mt_operate}
	propsChange={dispatch}
></TerminalOperations>
*/
export default function TerminalOperations({ configInfo, defaultInfo, propsChange }: TerminalOperationsProps) {
	const user = useGlobalStore((state) => state.user)
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	/*
	defaultInfo = {
		camera_operation: 0,
		chairman: 1,
		dcs: 0,
		doubleflow: 1,
		force_brd: 0,
		mix: 0,
		mt_delete_offline: 1,
		mt_delete_online: 0,
		mt_info_offline: 1,
		mt_info_online: 1,
		mt_offline: 1,
		mt_online: 1,
		mt_video: 0,
		mute: 1,
		often_mt: 1,
		select: 0,
		silence: 0,
		speaker: 1,
		upload: 0,
		vmp: 0,
	}

	
	Object.keys(defaultInfo)   defaultInfo对象中所有的key组成的数组
	## 结果
	['camera_operation', 'chairman', 'dcs', 'doubleflow', 'force_brd',
	 'mix', 'mt_delete_offline', 'mt_delete_online', 'mt_info_offline',
	  'mt_info_online', 'mt_offline', 'mt_online', 'mt_video', 'mute', 
	  'often_mt', 'select', 'silence', 'speaker', 'upload', 'vmp']

	
	defaultValue 选中的数据的key组成的数组
	## 结果
	['chairman', 'doubleflow', 'mt_delete_offline', 'mt_info_offline', 
	'mt_info_online', 'mt_offline', 'mt_online', 'mute', 'often_mt', 'speaker']

	*/
	let defaultValue: string[] = useMemo(() => {
		let arr: string[] = []
		defaultInfo &&
			(Object.keys(defaultInfo) as Array<keyof IMtOperation>).forEach((key) => {
				// defaultInfo[key]  值为 1 push  为0就过滤
				if (defaultInfo[key]) {
					arr.push(key)
				}
			})
		return arr
	}, [defaultInfo])
	const terminalSettings = [
		{
			text: t('哑音'),
			value: 'mute',
			checked: configInfo.mute,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setMute', payLoad: val })
			},
		},
		{
			text: t('静音'),
			value: 'silence',
			checked: configInfo.silence,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setSilence', payLoad: val })
			},
		},
		{
			text: t('摄像机远遥'),
			value: 'camera_operation',
			checked: configInfo.camera_operation,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setCameraOperation', payLoad: val })
			},
		},
		{
			text: t('内容共享'),
			value: 'doubleflow',
			checked: configInfo.doubleflow,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setDoubleFlow', payLoad: val })
			},
		},
		{
			text: t('发言方'),
			value: 'speaker',
			checked: configInfo.speaker,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setSpeaker', payLoad: val })
			},
		},
		{
			text: t('终端信息'),
			value: 'mt_info_online',
			checked: configInfo.mt_info_online,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setMtInfoOnline', payLoad: val })
			},
		},
		{
			text: t('挂断'),
			value: 'mt_offline',
			checked: configInfo.mt_offline,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setMtOffline', payLoad: val })
			},
			disabled: true,
		},
		{
			text: t('管理方'),
			value: 'chairman',
			checked: configInfo.chairman,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setChairman', payLoad: val })
			},
		},
		{
			text: t('终端选看'),
			value: 'select',
			checked: configInfo.select,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setSelect', payLoad: val })
			},
		},
		{
			text: t('添加到定制混音'),
			value: 'mix',
			checked: configInfo.mix,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setMix', payLoad: val })
			},
		},
		{
			text: t('终端录像'),
			value: 'mt_video',
			checked: configInfo.mt_video,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setMtVideo', payLoad: val })
			},
			hide: !user?.enable_video,
		},
		{
			text: SWITCH.showOftenMt ? t('常用/互动终端') : t('互动终端'),
			value: 'often_mt',
			checked: configInfo.often_mt,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setOftenMt', payLoad: val })
			},
			hide: !SWITCH.personConfig.often,
		},
		{
			text: t('参与/退出协作'),
			value: 'dcs',
			checked: configInfo.dcs,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setDcs', payLoad: val })
			},
			hide: !user?.enable_dcs,
		},
		{
			text: t('自主多画面'),
			value: 'vmp',
			checked: configInfo.vmp,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setVmp', payLoad: val })
			},
		},
		{
			text: t('上传', { context: 'SC1' }),
			value: 'upload',
			checked: configInfo.upload,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setUpload', payLoad: val })
			},
		},
		{
			text: t('强制广播'),
			value: 'force_brd',
			checked: configInfo.force_brd,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setForceBrd', payLoad: val })
			},
			hide: !user?.enable_sfu,
		},
		{
			text: t('删除终端'),
			value: 'mt_delete_online',
			checked: configInfo.mt_delete_online,
			onChange: (val: 0 | 1) => {
				propsChange({ type: 'setMtDeleteOnline', payLoad: val })
			},
		},
	]
	return (
		<LabelCheckBox
			mainDesc={t('在线终端快捷操作')}
			subDesc={t('勾选后会议控制界面会出现对应快捷操作，最多选7项')}
			list={terminalSettings}
			/*
			defaultValue 选中的值
			*/
			defaultValue={defaultValue}
			maxLimit={7}
		></LabelCheckBox>
	)
}
